<template>
  <div class="cardContainer2" style="width: 96%">
    <div class="card2 h-62 p-2" style="width: 100%">
      <el-row :gutter="10" justify="space-between">
        <el-col :span="6">
          <weatherDataItem
            :title="'体感(℃)'"
            :value="qweather.feelst"
            :img="'https://zt-1304966785.cos.ap-nanjing.myqcloud.com/thermometer-colder.svg'"
          ></weatherDataItem>
        </el-col>
        <el-col :span="6">
          <weatherDataItem
            :title="'温度(℃)'"
            :value="qweather.temperature"
            :img="'https://zt-1304966785.cos.ap-nanjing.myqcloud.com/thermometer.svg'"
          ></weatherDataItem>
        </el-col>
        <el-col :span="6">
          <weatherDataItem
            :title="'风向'"
            :value="qweather.direct"
            :padding-class="'pl-2'"
            :fontSizeClass="'text-xl'"
            :img="'https://zt-1304966785.cos.ap-nanjing.myqcloud.com/windsock.svg'"
          ></weatherDataItem>
        </el-col>
        <el-col :span="6">
          <weatherDataItem
            :title="'风力(级)'"
            :value="qweather.power"
            :padding-class="'pl-8'"
            :fontSizeClass="'text-xl'"
            :img="'https://zt-1304966785.cos.ap-nanjing.myqcloud.com/wind-alert.svg'"
          ></weatherDataItem>
        </el-col>
      </el-row>
      <el-row :gutter="10" justify="space-between">
        <el-col :span="6">
          <weatherDataItem
            :title="'温差(℃)'"
            :value="qweather.real.weather.temperatureDiff"
            :img="'https://zt-1304966785.cos.ap-nanjing.myqcloud.com/thermometer-snow.svg'"
          ></weatherDataItem>
        </el-col>
        <el-col :span="6">
          <weatherDataItem
            :title="'降水(mm)'"
            :value="qweather.real.weather.rain"
            :img="'https://zt-1304966785.cos.ap-nanjing.myqcloud.com/rain.svg'"
          ></weatherDataItem>
        </el-col>
        <el-col :span="6">
          <weatherDataItem
            :title="'气压(Mpa)'"
            :value="qweather.real.weather.airpressure"
            :img="'https://zt-1304966785.cos.ap-nanjing.myqcloud.com/tornado.svg'"
          ></weatherDataItem>
        </el-col>
        <el-col :span="6">
          <weatherDataItem
            :title="'湿度(%)'"
            :value="qweather.real.weather.humidity"
            :img="'https://zt-1304966785.cos.ap-nanjing.myqcloud.com/humidity.svg'"
          ></weatherDataItem>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { toRefs } from 'vue';
import weatherDataItem from './WeatherDataItem.vue';

// Define props
const props = defineProps({
  qweather: Object, // Define qweather as an object prop
});

// Destructure the qweather prop
const { qweather } = toRefs(props);
</script>
<style scoped lang="less"></style>
